CSS3を使った画像を使わずにできるデザインのHTML化 #2 「Box Shadowを使った表現」

前回の記事「CSS3を使った画像を使わずにできるデザインのHTML化 #1」では百聞は一見に如かずということでサンプルを見ていただきました。

今回は、シャドウ関連のプロパティ２つ、「Box Shadow」と「Text Shadow」についてどのようにプロパティの値を指定するとサンプルのようになるのかについてご紹介します。

Box Shadowプロパティ

box-shadow : x軸 y軸 ぼかしサイズ 広がりサイズ 陰の色 inset ;

項目	説明	サンプル
x軸位置	0を基準とし、正の数で右方向、負の数で左方向の陰	5px
y軸位置	0を基準とし、正の数で下方向、負の数で上方向の陰	5px
ぼかしサイズ	-	5px
広がりサイズ	陰の広がり距離。陰の基本サイズに指定サイズをプラス	5px
陰の色	16進数、RGBAなどで色指定	#ccc
inset	陰を内側方向に指定する	inset

サンプル

実際に指定してみるとこんな感じです。
一応ベンダープレフィックスの指定もしておきます。

 -webkit-box-shadow : 1px 1px 5px #ccc; -moz-box-shadow : 1px 1px 5px #ccc; box-shadow : 1px 1px 5px #ccc; 

また、Box Shadowは複数指定することもできます。複数指定する場合は「,」カンマで区切るだけです。

 -webkit-box-shadow : inset 1px 1px 5px #ccc, 1px 1px 5px #ccc; -moz-box-shadow : inset 1px 1px 5px #ccc, 1px 1px 5px #ccc; box-shadow : inset 1px 1px 5px #ccc, 1px 1px 5px #ccc; 

これではただの陰をつけただけなので、より細部にこだわった使い方をしてみます。

Box Shadowをborderでは指定できない1pxラインに使う

Webデザイン、アプリケーションデザインでも「神は細部にやどる」とよく言われます。この言葉に近づける方法の一つとして、Webデザインではピクセル単位でデザインすることで、より質の高いデザインを実現できます。

Borderプロパティで実現できる場合もありますが、Borderプロパティは要素のサイズに影響を与えてしまい、レイアウトの際特に注意が必要です。

そこで、Box Shadowを使います。
Box Shadowは要素のサイズを無視して陰を指定することができます。この仕様を利用するとレイアウトにほとんど影響を与えることなく、シンプルに1pxのデザインを実現できます。

縁を彫り込まれた感じに

BorderとBox Shadowを使い、要素の縁を彫り込まれたようなデザインにできます。違いがわかるように、シャドウを入れたものといれていないものを並べてみました。このサンプルでは、ぼかしなしの白いシャドウをx軸、y軸ともに1pxずらし要素の外に光があたったような見せ方をしています。

 div { border:1px solid #ddd; background:#fff; -webkit-box-shadow : 1px 1px 0px #fff; -moz-box-shadow : 1px 1px 0px #fff; box-shadow : 1px 1px 0px #fff; } 

少し浮き出た感じに

前項と似た方法を使い少し浮き出たようなスタイルを実現します。
これはbox-shadowのinsetを利用し、内側に1pxのラインを表示します。

背景より少し薄い色を使うことで自然な色合いを実現できます。

 div { border:1px solid #ccc; background:#ddd; -webkit-box-shadow : inset 0px 1px 0px #eee; -moz-box-shadow : inset 0px 1px 0px #eee; box-shadow : inset 0px 1px 0px #eee; } 

両方を組み合わせてみる

両方を組み合わせると、少し浮き出しているように見え、縁が彫り込まれたようなスタイルにすることができます。

 div { border:1px solid #ccc; background:#ddd; -webkit-box-shadow : inset 1px 1px 0px #eee, 1px 1px 0px #fff; -moz-box-shadow : inset 1px 1px 0px #eee, 1px 1px 0px #fff; box-shadow : inset 1px 1px 0px #eee ,1px 1px 0px #fff; } 

まとめ

とても単純なものですが、応用することでデザインの質を一段上げることができます。HTMLの構造もシンプルになり検索エンジンに対しても良いですし、制作効率も上がります。

「CSS3対応していないブラウザはどうするの？」という考えもあるかもしれません。
ひとつの考え方としてプログレッシブ・エンハンスメントという考え方もあります。これは対応しているブラウザにはよりリッチに、していないブラウザには情報が正しく表示されるようにする。この考え方が利用できる場合にはCSS3を積極的に利用することもできると思います。

CSS3を思いっきり利用できる時が早く来ると良いですね。次回はText Shadowについて紹介します。